<template>
  <div class="carInfoContent">
    <div class="searchBox">
      <el-form ref="formRef" :model="sForm" class="demo-form-inline" label-position="right" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="车辆名称">
              <el-input v-clearEmoji v-model="sForm.name" clearable style="width: 100%" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="使用状态">
              <el-select v-model="sForm.name" popper-class="eloption" clearable style="width: 100%" filterable
                placeholder="">
                <el-option v-for="brand in brandList" :key="brand.id" :value="brand.id" :label="brand.name" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="司机">
              <el-select v-model="sForm.name" popper-class="eloption" clearable style="width: 100%" filterable
                placeholder="">
                <el-option v-for="brand in brandList" :key="brand.id" :value="brand.id" :label="brand.name" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" type="flex" justify="end">
          <el-col :span="8">
            <el-form-item>
              <el-button>搜索</el-button>
              <el-button>重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-button class="addBtn" @click="addFn">新增</el-button>
    <div class="table" style="background-color: #fff; padding: 10px; padding-top: 20px">
      <el-table border class="tablebox" :data="carList" style="width: 100%" max-height="550" size="medium">
        <el-table-column type="index" align="center" width="150" label="序号" />
        <el-table-column prop="img" align="center" label="车辆照片">
          <template v-slot="{ row }">
            <div class="img" style="padding-top: 10px">
              <img style="width: 100px" :src="row.imgUrl" alt="" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" align="center" label="车辆名称" />
        <el-table-column prop="describes" align="center" label="车牌号" />
        <el-table-column prop="describes" align="center" label="司机" />
        <el-table-column prop="describes" align="center" label="装货面积" />
        <el-table-column prop="describes" align="center" label="联系方式" />
        <el-table-column prop="" align="center" label="使用状态">
          <template v-slot="{ row }">
            {{ row.showStatus == 0 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template v-slot="{ row }">
            <el-button type="text" style="margin-right: 10px" @click="edit(row)">修改</el-button>
            <el-button type="text" style="margin-right: 10px; color: red"
              @click="$delFn('车辆', del, row)">删除</el-button>
            <!-- <template>
              <el-popconfirm
                title="确定要删除该轮播图吗？"
                @onConfirm="del(row)"
              >
                <el-button slot="reference" style="color:red" type="text" >删除</el-button>
              </el-popconfirm>
            </template> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination" style="padding-top: 20px; text-align: center">
        <el-pagination :current-page="page.pageNum" :page-sizes="$pageSizes" :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
    <AddCarDialog :close-on-click-modal="false" :is-show-btn="isShowBtn" :show-dialog.sync="showDialog" :width="width"
      :title="title" @close="close" />
  </div>
</template>

<script>
import AddCarDialog from "./components/AddCarDialog";
export default {
  name: "CarInfo",
  components: {
    AddCarDialog,
  },
  data() {
    return {
      sForm: {
        name: "",
      },
      brandList: [],
      carList: [],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      isShowBtn: false,
      showDialog: false,
      width: "50%",
      title: "添加车辆",
    };
  },
  methods: {
    addFn() {
      this.showDialog = true;
    },
    // 获取条数改变
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.page.pageNum = 1;
      if (this.isSearch) {
        this.searchFn();
      } else {
        this.getBannerList();
      }
    },
    // 获取页数改变
    handleCurrentChange(val) {
      this.page.pageNum = val;
      if (this.isSearch) {
        this.searchFn();
      } else {
        this.getBannerList();
      }
    },
    close() {
      this.showDialog = false;
    },
  },
};
</script>

<style scoped lang="scss">
.carInfoContent {
  padding: 10px;

  .searchBox {
    padding-top: 20px;
    background-color: #fff;
    margin-bottom: 10px;
  }
}
</style>
